<template>
	<div class="role_update">
		<div class="layout-breadcrumb">
			<Breadcrumb>
			    <BreadcrumbItem to="/">首页</BreadcrumbItem>
			    <BreadcrumbItem href="">系统配置</BreadcrumbItem>
			    <BreadcrumbItem href="/config/role">角色管理</BreadcrumbItem>
			    <BreadcrumbItem href="/config/role/update">角色更新</BreadcrumbItem>
			</Breadcrumb>
		</div>
		<div class="layout-content">
		    <div class="layout-content-main">
		    	<IForm :model="form" ref="form" :label-width="100" :rules="formRule" >
					<IInput v-model="form.id" class="hide" />
			        <FormItem prop="name" label="角色英文名">
			            <IInput v-model="form.name" size="large" placeholder="角色英文名" />
			        </FormItem>
			        <FormItem prop="displayName" label="角色中文名">
			            <IInput v-model="form.displayName" size="large" placeholder="角色中文名" />
			        </FormItem>
			        <FormItem prop="description" label="描述">
			            <IInput v-model="form.description"  type="textarea" :autosize="{minRows: 5,maxRows: 10}" size="large" placeholder="角色描述" />
			        </FormItem>
			        <FormItem prop="permissions" label="权限列表">
			        	<CheckboxGroup v-model="form.permissions" @on-change="checkAllGroupChange">
			        		<Checkbox v-for="(checkbox,index) in checkBoxs" :key="checkbox.id" :label="checkbox.id" >{{checkbox.txt}}</Checkbox>
					    </CheckboxGroup>
			        </FormItem>
			        <FormItem>
			        	<Checkbox :indeterminate="indeterminate" :value="checkAll" @click.prevent.native="handleCheckAll">权限全选</Checkbox>
			        </FormItem>
			        <FormItem>
			        	<IButton type="primary" @click="submit('form')">提交</IButton>
			        </FormItem>
			    </IForm>
		    </div>
		</div>
	</div>
</template>
<script>
import {Breadcrumb,Form,Input,Button,Checkbox} from 'iview';

export default{
	data () {
		const validateName=(rule , value ,callback)=>{
            var reg = /^[A-Za-z_]+$/;
            if(!reg.test(value)){
                callback(new Error('只能填写英文、_'));
            }
            this.Axios.Config.Role.CheckName({name:value,id:this.form.id})
            .then(res =>{
            	if(!res){
            		callback(new Error('角色英文名已存在'));
            		return false;
            	}
                callback();
            })
        };
        const validateDisplayName=(rule , value ,callback)=>{
            var reg = /^[\u4E00-\u9FA5-]+$/;
            if(!reg.test(value)){
                callback(new Error('请填写合法中文名'));
            }
            callback();
        };
        return {
            form :{
				id : 0,
				name : '',
				displayName  : '',
				description  : '',
				permissions : [],
            },
			rawHtml : '',
			checkBoxs : [],
			indeterminate: false,
			checkAll: false,
            formRule: {
                name: [
                    { required: true, message: '请填写角色英文名', trigger: 'blur' },
                    { validator: validateName, trigger: 'blur'}
                ],
                displayName: [
                    { required: true, message: '请填写角色中文名', trigger: 'blur' },
                    { validator: validateDisplayName, trigger: 'blur'}
                ],
                permissions: [
                    { required: true, message: '请至少选择一个权限'},
                ],
            },
        }
    },
	components:{
        Breadcrumb,
        "BreadcrumbItem" : Breadcrumb.Item,
        'IInput' : Input,
		'IForm' : Form,
		'FormItem' : Form.Item,
		'IButton' : Button,
		Checkbox,
		"CheckboxGroup" : Checkbox.Group,
    },
    methods: {
    	submit(name){
    		this.$refs[name].validate((valid) => {
                if (!valid) {
                    return false;
                }
                this.Axios.Config.Role.Update(this.form)
	            .then(res =>{
	                if(!res) return false;
	                this.$router.go(-1);
	            })
	            .catch(error =>{
	                this.$Message.error(error);
	            })
            })
    	},
    	handleCheckAll () {
            if (this.indeterminate) {
                this.checkAll = false;
            } else {
                this.checkAll = !this.checkAll;
            }
            this.indeterminate = false;

            if (this.checkAll) {
            	var all = [];
            	var boxs = this.checkBoxs;
            	for(var i in boxs){
            		all.push(boxs[i]['id']);
            	}
                this.form.permissions = all;
            } else {
                this.form.permissions = [];
            }
        },
    	checkAllGroupChange (data) {
            if (data.length === this.checkBoxs.length) {
                this.indeterminate = false;
                this.checkAll = true;
            } else if (data.length > 0) {
                this.indeterminate = true;
                this.checkAll = false;
            } else {
                this.indeterminate = false;
                this.checkAll = false;
            }
        }
    },
    created: function() {
	    //获取所有权限
	    this.Axios.Config.Role.AllPermission()
        .then(res =>{
        	if(!res) return false;
            var data = res.data;
            for(var i in data){
            	this.checkBoxs.push({
	        		'id': data[i]['id'],
	        		'txt' : data[i]['displayName'],
	        	})
            }
            this.checkAllGroupChange(this.form.permissions);
        })

        //面包屑导航路径赋值、获取角色信息
        if(this.$route.params.id===undefined){
        	return false;
	    }
	    var id = this.$route.params.id;
    	this.Axios.Config.Role.Get(id)
        .then(res =>{
        	if(!res) return false;
            var data = res.data;
            this.form.id = data.id;
            this.form.name = data.name;
            this.form.displayName = data.displayName;
            this.form.description = data.description;
            for(var i in data.permissions){
            	this.form.permissions.push(data.permissions[i]['id']);
            }
            this.checkAllGroupChange(this.form.permissions);
        })
	}
}
</script>
<style>
	.role_update .ivu-checkbox-group-item{width: 100%;}
</style>